<template>
  <div class="bycbigbox">
    <div class="bycbanner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <van-image :src="item.picUrl" style="width: 100%; height: 350px" />
        </van-swipe-item>
      </van-swipe>
      <div class="bycnav">
        <ul>
          <li>
            <van-icon name="like"></van-icon>
            <p>签到</p>
          </li>
          <li>
            <van-icon name="bag"></van-icon>
            <p>礼券</p>
          </li>
          <li>
            <van-icon name="video"></van-icon>
            <p>砍价</p>
          </li>
          <li>
            <van-icon name="star"></van-icon>
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 填充 -->
    <div class="byczhanwei"></div>
    <!-- 全民砍价的区域 -->
    <div class="bycbigkj" @click.stop="$router.push('/xq')">
      <cf title="全民砍价"></cf>
      <cutlist :arr="cutList" />
    </div>
    <!-- 精选专题 -->
    <cf title="精选专题" style="border-top: 1px solid #ddd"></cf>
    <div class="bycjxuang">
      <dl
        v-for="(item, index) in bannerlist"
        :key="index"
        @click.stop="$router.push(`/jxuang?id=${item.id}`)"
      >
        <dt><img :src="item.pic" alt="" /></dt>
        <dd>
          <p v-html="item.title"></p>
          <p class="ys">{{ item.descript }}</p>
        </dd>
      </dl>
    </div>
    <div class="byczhanwei"></div>

    <cf
      title="人气推荐"
      style="border-top: 1px solid #ddd"
      @click.native="$router.push('/xqy')"
    ></cf>
    <goods :title="rwenqilist"></goods>
    <div style="height: 100px"></div>
  </div>
</template>
<script>
import goods from "../cate/goods"
import cutlist from "../cate/cutlist";
import cf from "../xiangqing/chaifen";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: { cf, cutlist,goods },
  // 组件状态值
  data() {
    return {
      url: "",
      banner: [],
      cutList: [],
      bannerlist: [],
      rwenqilist: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 轮播图
    getbanner() {
      this.$axios.get(`${this.url}/banner/list`).then((res) => {
        this.banner = res.data;
      });
    },
  },
  //生命周期
  created() {},
  mounted() {
    this.url = this.$store.state.appurl;
    this.getbanner();
    this.$axios.get(`${this.url}/shop/goods/kanjia/list`).then((res) => {
      let arr = res.data.result;
      let goodsMap = res.data.goodsMap;

      arr.slice(-2).forEach((item) => {
        this.cutList.push(goodsMap[item.goodsId]);
      });
    });

    this.$axios.get(`${this.url}/cms/news/list`).then((res) => {
      this.bannerlist = res.data;
    });

    this.$axios.get(`${this.url}/shop/goods/list`).then((res) => {
      this.rwenqilist = res.data.slice(-4);
      console.log(this.rwenqilist);
    });
  },
};
</script> 
<style scoped lang="scss">
.bycrq {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .bycrq-item {
    width: 48%;
    margin: 1%;
    box-sizing: border-box;
    img {
      width: 100%;
    }
    p:nth-of-type(2) {
      margin: 10px 0px;
    }
  }
}
.ys {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: darkgrey;
}
.bycjxuang {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  overflow: auto;
  dl {
    width: 318px;
    margin: 0;
    margin-right: 15px;
    dt {
      img {
        width: 318px;
        height: 204px;
        border-radius: 5px;
      }
    }
    dd {
      margin: 0;
      p {
        font-size: 15px;
        margin: 0;
      }
    }
  }
}
.bycbigbox {
  width: 100%;
}
.bycbigkj {
  width: 100%;
  box-sizing: border-box;
}

.byczhanwei {
  width: 100%;
  height: 15px;
  background: gainsboro;
}
.bycbanner {
  width: 100%;
  position: relative;
}
.bycnav {
  width: 100%;
  height: 102px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 30% 30% 0 0;
  background: #ffffff;
  padding-top: 25px;
  box-sizing: border-box;
  ul {
    width: 100%;
    display: flex;
    li {
      width: 25%;
      text-align: center;
      font-size: 20px;
      color: indianred;
      .van-icon {
        font-size: 30px;
        color: lightgray;
      }
      p {
        margin: 0;
      }
    }
  }
}
</style>
